<template>
  <div class="mo-fang-tabs">
    <el-tabs v-model="activeTab" @tab-click="handleSelect">
      <el-tab-pane :label="item.label" :name="item.value" v-for="item in dictMaps.product_type" :key="item.value"></el-tab-pane>
    </el-tabs>
    <ProductCard :itemList="productList"></ProductCard>
  </div>
</template>
<script>
import { tabList } from '../options'
import Tabs from './Tabs'
import ProductCard from './ProductCard'
import { getIndexList } from '@/api/product'
import { mapGetters } from 'vuex'
export default {
  components: { Tabs, ProductCard },
  data () {
    return {
      tabList,
      activeTab: '1',
      productList: []
    }
  },
  computed: {
    ...mapGetters(['dictMaps'])
  },
  created () {
    this.loadList()
  },
  methods: {
    handleSelect (row) {
      this.loadList(row.name)
    },
    loadList (type = 1) {
      this.$http({
        url: this.$http.adornUrl(getIndexList().url),
        method: getIndexList().method,
        params: {
          type: type
        }
      }).then(({ data }) => {
        const list = [...data.data].slice(0, 5)
        this.productList = list
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.mo-fang-tabs {
  margin: 30px auto 40px;
  width: 1200px;
}
</style>
